<template>
  <div>
    <!-- <ComTable
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :config="config"
      :pagination="{
        total: pageing.total,
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
      }"
      :list="getRechargelist"
      :modes="consumptionModes"
      :summaryMethod="summaryMethod"
    >
    </ComTable> -->
    <el-table
      :data="getRechargelisttable"
      style="width: 100%"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <!-- <p>{{ scope.row.createdBy }}</p> -->
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.phonenumber"
            v-if="scope.row.phonenumber"
          >
            <p slot="reference">{{ scope.row.phonenumber }}</p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="用户姓名">
        <template slot-scope="scope">
          <p>{{ scope.row.nickName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <p>{{ getStatus(scope.row.type) }}</p>
        </template>
      </el-table-column>

      <el-table-column label="金额" prop="amount" sortable>
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.amount ? scope.row.amount : '0'"
          >
            <p slot="reference">{{ scope.row.amount | sumFilters }}</p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="问金" prop="voucher" sortable>
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.voucher ? scope.row.voucher : '0'"
          >
            <p slot="reference">{{ scope.row.voucher | sumFilters }}</p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="问金结余" prop="balance" sortable>
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.balance ? scope.row.balance : '0'"
          >
            <p slot="reference">{{ scope.row.balance | sumFilters }}</p>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="充值时间" prop="createdTime" width="80">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.createdTime"
            v-if="scope.row.createdTime"
          >
            <p slot="reference">
              {{ getTime(scope.row.createdTime) }}
            </p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="问金到期时间" prop="expirationTime" width="100">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.expirationTime"
            v-if="scope.row.expirationTime"
          >
            <p slot="reference">
              {{ getTime(scope.row.expirationTime) }}
            </p>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        :current-page="pageing.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageing.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageing.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
import { getRechargelist } from "@/wss/newApi_3-24/askAround/index";
export default {
  name: "Recharge",
  // props: ["getRechargelisttable"],
  components: { ComTable },
  data() {
    return {
      // 表格配置
      config: {
        showSummary: true,
        // border: true,
        isAdd: false,
        loading: false,
      },

      //重置详情表格
      consumptionModes: [
        // {
        //   showOverflowTooltip: true,
        //   label: "订单号",
        //   mode: "orderNo",
        // },
        {
          label: "手机号",
          mode: "phone",
          showOverflowTooltip: true,
        },

        {
          label: "用户姓名",
          mode: "nickName",
          showOverflowTooltip: true,
        },
        // {
        //   label: "类型",
        //   mode: "type",
        //   showOverflowTooltip: true,
        // },
        {
          label: "类型",
          width: 80,
          mode: "type",
          effectiveStatus: true,
          options: [
            {
              l: "直接购买",
              v: "1",
            },
            {
              l: "充值",
              v: "2",
            },
            {
              l: "赋值 ",
              v: "3",
            },
            {
              l: "转让",
              v: "4",
            },
            {
              l: "赠送",
              v: "-1",
            },
          ],
        },
        {
          label: "金额",
          mode: "amount",
          align: "right",
          showOverflowTooltip: true,
        },
        {
          label: "问金",
          mode: "voucher",
          align: "right",
          showOverflowTooltip: true,
        },
        {
          label: "问金结余",
          mode: "balance",
          align: "right",
          showOverflowTooltip: true,
        },
        {
          label: "充值时间",
          mode: "createdTime",
          showOverflowTooltip: true,
        },
        {
          width: 100,
          label: "问金到期时间",
          mode: "expirationTime",
          showOverflowTooltip: true,
        },
      ],
      // 充值订单列表
      getRechargelisttable: [],
      // 问圈ID
      masetrid: "",
      // 父主键传过来搜索参数
      seachdata: {},
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
    };
  },

  mounted() {
    // 获取父组件传过来的搜索参数
    this.$bus.$off("SeachRecharge");
    this.$bus.$on("SeachRecharge", (item) => {
      this.seachdata = item;
      this.getRechargelistfn(item);
    });
  },
  methods: {
    //查询列表
    async Rechargelist(val) {
      console.log(val, "val");
      this.masetrid = val;
      await this.getRechargelistfn();
    },
    //查詢充值记录
    async getRechargelistfn(arr) {
      let newdata = {
        circleId: this.masetrid,
        phonenumber: arr && arr.phonenumber,
        type: arr && arr.type,
        status: "2",
        pageSize: this.pageing.pageSize,
        pageNum: this.pageing.pageNum,
      };
      let { code, rows, total } = await getRechargelist(newdata);
      if (code == 200) {
        this.pageing.total = total;
        let filterData = rows;
        filterData.forEach((item) => {
          if (item.amount) {
            item.amount = this.$options.filters["sumFilters"](item.amount);
          }
          if (item.voucher) {
            item.voucher = this.$options.filters["sumFilters"](item.voucher);
          }
          if (item.balance) {
            item.balance = this.$options.filters["sumFilters"](item.balance);
          }
        });
        this.getRechargelisttable = filterData;
      }
    },
    // 获取类型
    getStatus(value) {
      const stateMap = {
        1: "直接购买",
        2: "充值",
        3: "赋值",
        4: "转让",
        "-1": "赠送",
      };
      return stateMap[value];
    },

    // 合计行
    summaryMethod(param) {
      const { columns, data } = param;
      const sums = [];

      // 删除金额里面的逗号
      data.forEach((item) => {
        item.amount = item.amount.replace(new RegExp(",", "g"), "");
        item.balance = item.balance.replace(new RegExp(",", "g"), "");
        item.voucher = item.balance.replace(new RegExp(",", "g"), "");
      });
      // 删除金额里面的逗号
      columns.forEach((column, index) => {
        //合计头 index--显示在哪一列
        if (index == 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => {
          console.log(columns, "------------------xxxxxxxxxxxssssssssss");
          return Number(item[column.property]);
        });
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          //sums[index] += ' 元';
        } else {
          sums[index] = "---";
        }
      });
      sums[3] = this.$options.filters["sumFilters"](sums[3]);
      sums[4] = this.$options.filters["sumFilters"](sums[4]);
      sums[5] = this.$options.filters["sumFilters"](sums[5]);
      return sums;
    },

    // 合计行
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      // 删除金额里面的逗号
      data.forEach((item) => {
        if (item.amount)
          item.amount = item.amount.replace(new RegExp(",", "g"), "");
        if (item.balance)
          item.balance = item.balance.replace(new RegExp(",", "g"), "");
        if (item.voucher)
          item.voucher = item.voucher.replace(new RegExp(",", "g"), "");
      });
      // 删除金额里面的逗号
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] = sums[index];
        } else {
          sums[index] = "---";
        }
      });
      sums[3] = this.$options.filters["sumFilters"](sums[3]);
      sums[4] = this.$options.filters["sumFilters"](sums[4]);
      sums[5] = this.$options.filters["sumFilters"](sums[5]);
      return sums;
    },
   // 分页容量发生改变
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getRechargelistfn(this.seachdata);
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getRechargelistfn(this.seachdata);
    },
    // 转时间格式 220901
    getTime(days) {
      let time = days.split(" ")[0];
      let arr = time.split("-");
      return arr[0].slice(2) + arr[1] + arr[2];
    },
  },
};
</script>

<style scoped>
::v-deep .el-table__footer-wrapper .has-gutter {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}

/* 表格样式 */
.el-table {
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  padding: 12px 0;
  /* border-bottom: 0; */
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
.pagination {
  text-align: center;
  margin: 30px 0;
}
</style>